Всем доброго времени суток! Прошу отнестись к моей проблеме серьезно, потому что я на самом деле долго пытался и не смог решить свою проблему.
P.S. Огромное спасибо всем тем, кто уделил мне свое свободное время.
Проблемы ниже по тексту.
Начну со строения БД:
Имя: blog_test_ajax
Таблица: posts
Поля:
id - INT
img - VARCHAR
video - VARCHAR
title - VARCHAR
text - VARCHAR
Файл index.php
<?php
include 'INC/database_access.php';
// Получаем первые 10 статей, которые будут видны изначально.
$res = mysqli_query($db, "SELECT * from `posts` ORDER BY `id` DESC LIMIT 10");
// Формируем массив из 10 статей.
$articles = array();
// Пока эта функция извлекает из БД записи, мы формируем массив.
while($row = mysqli_fetch_assoc($res))
{
$articles[] = $row;
}
?>
<!DOCTYPE html>
<html lang="ru" dir="ltr" id="html">
<head>
<meta charset="utf-8">
<title>Ajax test</title>
<link rel="stylesheet" href="css/style.css">
<!--Подключаем скрипты для создания динамической прокрутки-->
<script src="js/AJAX/jquery.js"></script>
<script src="js/AJAX/scripts.js"></script>
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('article');
document.createElement('footer');
document.createElement('aside');
</script>
</head>
<body>
<div id="content_container">
<div style="width: 200px;" id="articles">
<!--На каждом проходе извлекаем данные в переменную article-->
<?php foreach ($articles as $article): ?>
<h2><?php echo $article['title']; ?></h2>
<img src=img/materials/<?php echo $article['img']; ?>>
<p><?php echo $article['text']; ?></p>
<?php endforeach; ?>
</div>
<button id="more">More</button>
</div>
</body>
</html>
Когда первые 10 записей выводятся без использования ajax запроса, то все хорошо, т.е. видит поля img и video (пока прозапас).
Файл database_access.php
<?php
$db_host = "localhost";
$db_name = "blog_test_ajax";
$db_user = "root";
$db_pass = "";
//Подключаемся к базе
$db = mysqli_connect ($db_host, $db_user, "", $db_name) or die ("Невозможно подключиться к БД");
// Указываем кодировку, в которой будет получена информация из базы
mysqli_query ($db, 'set character_set_results = "utf8"');
Файл obrabotchik.php
<?php
include 'INC/database_access.php';
// C какой статьи будет осуществляться вывод
$startFrom = $_POST['startFrom'];
// Получаем 10 статей, начиная с последней отображенной
$res = mysqli_query($db, "SELECT * from `posts` ORDER BY `id` DESC LIMIT {$startFrom}, 10");
// Формируем массив со статьями
$articles = array();
while ($row = mysqli_fetch_assoc($res))
{
$articles[] = $row;
}
// Превращаем массив статей в json-строку для передачи через Ajax-запрос
echo json_encode($articles);
?>
Файл scripts.js
И вот тут загвоздка. Непонятно почему, если я изменю поле title здесь и в таблице на header, то у меня отказывается что-либо вытаскивать из БД. Таже проблема и с полем с именем img, не хочет его видеть в новых 10 записях, которые были извлечены с помощью запроса.
$(document).ready(function(){
/* Переменная-флаг для отслеживания того, происходит ли в данный момент ajax-запрос.
В самом начале даем ей значение false, т.е. запрос не в процессе выполнения */
var inProgress = false;
/* С какой статьи надо делать выборку из базы при ajax-запросе */
var startFrom = 10;
/* Используйте вариант $('#more').click(function() для того, чтобы дать пользователю возможность управлять процессом, кликая по кнопке "Дальше" под блоком статей (см. файл index.php) */
$(window).scroll(function() {
/* Если высота окна + высота прокрутки больше или равны высоте всего документа и ajax-запрос в настоящий момент не выполняется, то запускаем ajax-запрос */
if($(window).scrollTop() + $(window).height() >= $(document).height() -200 && !inProgress) {
$.ajax({
/* адрес файла-обработчика запроса */
url: 'obrabotchik.php',
/* метод отправки данных */
method: 'POST',
/* данные, которые мы передаем в файл-обработчик */
data: {"startFrom" : startFrom},
/* что нужно сделать до отправки запрса */
beforeSend: function() {
/* меняем значение флага на true, т.е. запрос сейчас в процессе выполнения */
inProgress = true;}
/* что нужно сделать по факту выполнения запроса */
}).done(function(data){
/* Преобразуем результат, пришедший от обработчика - преобразуем json-строку обратно в массив */
data = jQuery.parseJSON(data);
/* Если массив не пуст (т.е. статьи там есть) */
if (data.length > 0) {
/* Делаем проход по каждому результату, оказвашемуся в массиве,
где в index попадает индекс текущего элемента массива, а в data - сама статья */
$.each(data, function(index, data){
/* Отбираем по идентификатору блок со статьями и дозаполняем его новыми данными */
$("#articles").append(data.title + data.img + data.text);
});
/* По факту окончания запроса снова меняем значение флага на false */
inProgress = false;
// Увеличиваем на 10 порядковый номер статьи, с которой надо начинать выборку из базы
startFrom += 10;
}});
}
});
});
